<template>
  <div class="order">
    <Header title="订单" />
    <div class="content">
      <van-tabs color="#ffc400">
        <van-tab :title="i" v-for="i in navData">
          <div
            v-for="item in store.state.orderListed"
            v-if="i === '全部' && store.state.orderListed.length"
          >
            <van-card
              :num="item.num"
              :price="item.price"
              :title="item.title"
              :thumb="item.pic"
            />
          </div>
          <Blank v-else />
        </van-tab>
      </van-tabs>
    </div>
    <Footer />
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import Footer from '../../components/Footer'
import Header from '../../components/Header'
import Blank from '../../components/Blank'
import { useStore } from 'vuex'
export default {
  components: {
    Footer,
    Header,
    Blank,
  },
  setup() {
    const store = useStore()

    let data = reactive({
      navData: ['全部', '交易完成', '待付款', '代发货', '已发货'],
    })

    return {
      ...toRefs(data),
      store,
    }
  },
}
</script>
<style lang="less" scoped>
.order {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
